<template>
  <view class="search-view">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input-box">
        <uni-search-bar radius="100" placeholder="搜索内容" clearButton="auto" cancelButton="none" bgColor="#E5E5E5" @confirm="searchNote" v-model="data.searchText"/>
      </view>
      <!-- 按钮 -->
     <!-- <button class="s-button" @click="searchNote">搜索</button> -->
    </view>
    <!-- 笔记栏 -->
    <view class="note-log">
      <text>笔记</text>
    </view>
    <!-- 搜索的笔记内容 -->
      <scroll-view class="note-list" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreNote">
        <view class="waterfall">
         <!-- 笔记 -->
         <view class="flowList">
           <view class="note" v-for="idx in data.noteLeft" @click="showNote(data.noteList[idx].id,idx)">
             <!-- 笔记封面 -->
             <view class="note-img-box">
               <image mode="widthFix" class="note-img" :src="data.noteList[idx].url"></image>
             </view>
             <!-- 笔记标题内容 -->
             <view class="note-content-box">
               <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
             </view>
             <!-- 笔记作者信息和点赞情况 -->
             <view class="note-info">
               <view class="note-author-info">
                 <image class="author-avatar" :src="data.noteList[idx].authorAvatar"></image>
                 <text class="author-name">{{data.noteList[idx].authorName}}</text>
               </view>
               <view class="like-box" @click.stop="likeNote(idx)">
                 <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                 <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                 <text class="like-num">{{data.noteList[idx].likeNum}}</text>
               </view>
             </view>
           </view>
         </view>
         <view class="flowList">
          <view class="note" v-for="idx in data.noteRight" @click="showNote(data.noteList[idx].id,idx)">
            <!-- 笔记封面 -->
            <view class="note-img-box">
              <image mode="widthFix" class="note-img" :src="data.noteList[idx].url"></image>
            </view>
            <!-- 笔记标题内容 -->
            <view class="note-content-box">
              <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
            </view>
            <!-- 笔记作者信息和点赞情况 -->
            <view class="note-info">
              <view class="note-author-info">
                <image class="author-avatar" :src="data.noteList[idx].authorAvatar"></image>
                <text class="author-name">{{data.noteList[idx].authorName}}</text>
              </view>
              <view class="like-box" @click.stop="likeNote(idx)">
                <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                <text class="like-num">{{data.noteList[idx].likeNum}}</text>
              </view>
            </view>
          </view>            
        </view>   
        </view>
        <view class="tip-tag" v-if="data.noteList.length >= data.noteTotal">
          暂无更多了
        </view>
      </scroll-view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs } from 'vue';
import { onShow,onLoad,onUnload,onHide } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'

const data = reactive({
  searchText:"",
  noteList:[],
  noteLeft:[],
  noteRight:[],
  noteTotal:0,
  notePageNum:0,
  notePageSize:10,
  noteLeftHeight:0,
  noteRightHeight:0,
});

// 加载更多数据
function getMoreNote() {
  console.log("加载更多笔记。。。")
  //判断是否加载完
  if(data.noteTotal <= data.noteList.length){
    return
  }
  getNote()
}

onShow(() => {
  //监听页面返回的点赞事件
  updateLikeData()
})

onUnload((options)=>{
  uni.$off('like');  
})

function updateLikeData(){
  uni.$on('like',(likeData)=>{
    if(likeData.event != 5){
      return
    }
    //我的关注和发现
    console.log("点赞事件:我的搜索"+likeData.index+" "+likeData.like)
    if(data.noteList[likeData.index].like < likeData.like){
      data.noteList[likeData.index].likeNum++
    }else if(data.noteList[likeData.index].like > likeData.like){
      data.noteList[likeData.index].likeNum--
    }
    data.noteList[likeData.index].like = likeData.like
  })
}

// 查看笔记
function showNote(noteId,index){
  console.log("查看笔记"+noteId)
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}&event=5`
  })
}

// 点赞笔记
async function likeNote(idx){
  console.log("点赞搜索列表"+idx)
  let noteId = data.noteList[idx].id
  if(data.noteList[idx].like > 0){
    let res = await helper.dislikeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 0
      data.noteList[idx].likeNum--
    }
  }else{
    let res = await helper.likeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 1
      data.noteList[idx].likeNum++
    }
  }
}

function searchNote(){
  console.log("搜索笔记"+data.searchText)
  if(data.searchText == "" || data.searchText.trim() == ""){
    return
  }
  data.notePageNum = 0
  data.notePageSize = 10
  data.noteList = []
  data.noteLeft = []
  data.noteRight = []
  data.noteLeftHeight = 0
  data.noteRightHeight = 0
  getNote()
}

function getNote(){
  uni.request({
    url: helper.webUrl + "/note/searchNoteByKeyWord",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      keyWord: data.searchText,
      pageNum: data.notePageNum,
      pageSize: data.notePageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        let list = res.data.data.record
        data.noteTotal = res.data.data.total
        data.notePageNum++
        for(let i = 0; i < list.length; i++){
          data.noteList.push(list[i])
          if(data.noteLeftHeight <= data.noteRightHeight){
            data.noteLeftHeight += list[i].height / list[i].width + helper.noteBox
            data.noteLeft.push(data.noteList.length-1)
          }else{
            data.noteRightHeight += list[i].height / list[i].width + helper.noteBox
            data.noteRight.push(data.noteList.length-1)
          }
        }
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function clear(res) {
  uni.showToast({
    title: 'clear事件，清除值为：' + res.value,
    icon: 'none'
  })
}
</script>

<style>
.search-view{
  background-color: #f4f4f4;
  width: 100vw;
  height: 100vh;
}
.search-box{
  width: 100vw;
  display: flex;
  height: 8vh;
}
.search-input-box{
  width: 100%;
  height: 8vh;
  padding-top: 5px;
}
.s-button{
  width: 20vw;
  height: 60%;
  background-color: #89C0FF;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.note-log{
  width: 100vw;
  height: 6vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: bold;
}
.serach-note-view{
  width: 100vw;
  height: 86vh;
}
.note-list-view{
  width: 100vw;
}
.note-list{
  width: 100vw;
  height: 86vh;
  background-color: #f4f4f4;
}
.tab-swiper{
  width: 100vw;
  height: 86vh;
  background-color: #f4f4f4;
}
</style>
